<template>
	<view>
		<view :class="type?'edit-item':'look-item'">
			<view class="flex align-center">
				<view class="title">当前度数</view>
				<view class="flex align-center justify-between w-max-100" v-if="type">
					<input class="edit-font" type="text" v-model="number" placeholder="请输入" />
					<text class="edit-font">{{number_car}}元/度</text>
				</view>
			</view>
			<view class="flex align-center">
				<view class="title">银行卡</view>
				<picker v-if="type" :range="bankList" range-key="card_num" :value="bankIndex" @change="pickerChange($event, 'bankIndex')" class="w-max-100">
					<view class="flex align-center justify-between w-max-100">
						<view class="edit-font">{{ bankIndex >= 0 ?bankList[bankIndex].card_num : '' }}</view>
						<image class="right-icon" src="../../static/images/right.png" mode=""></image>
					</view>
				</picker>
			</view>
			<view>
				<view class="title mb-4">拍照</view>
				<view class="flex flex-wrap clzp-box">
					<view class="mb-2">
						<view class="img-box mb-2">
							<image v-if="!image" src="../../static/images/up-img.png" @click="upFileImg('image')"></image>
							<image v-if="image" class="clear-img" @click="image = ''" src="../../static/images/clear-img.png" mode=""></image>
							<image v-if="image" :src="image | imgUrl" @click.stop="lookImg(image)"></image>
						</view>
					</view>

				</view>
			</view>

		</view>
		<view class="edit-btn" style="margin-top: 50rpx;" @click="upDataInfo">上传</view>
		<!-- <view class="histry" @click="histry">上传记录</view> -->
	</view>
</template>

<script>
	import simpleAddress from '@/components/simple-address/simple-address.vue';
	import { wxCesh } from "../../api/public.js"
	import {
		getUserInfo,
		postUpdateInfo,
		postUploadDegrees,
		postCardList
	} from "../../api/user.js";
	import {
		upFile, url
	} from "../../utils/url.js";
	import util from "../../utils/util.js"
	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				id: 0,
				type: true, // true 编辑  false 查看
				bankList: [], // 银行卡列表
				bankIndex: -1,
				number_car: 0,
				number: '', // 用电度数
				image: "", // 图片
			}
		},
		filters:{
			imgUrl(img) {
				if(img.indexOf('http') != -1) return img;
				if(img.indexOf('http') == -1) return url + img
			}
		},
		onLoad(e) {
			this.init(e)
		},
		methods: {
			init(e){
				this.number_car = uni.getStorageSync('userInfo').degree_money;
				this.getBankList(e.detail || '')
			},
			
			// 银行卡列表
			async getBankList(detail) {
				var data = {}
				data.token = uni.getStorageSync('token');
				var res = await postCardList(data);
				if(res.data.code == 1) {
					this.bankList = res.data.data;
				}
				if(this.detail != '') this.initData(detail)
			},
			
			initData(data) {
				let date = JSON.parse(data);
				this.number = date.degrees_num;
				this.image = date.image;
				this.id = date.id;
				this.bankList.forEach((item,index) => {
					if(item.id == date.bank_card_id) this.bankIndex = index
				})
			},
			
			// picker
			pickerChange(e,key) {
				this[key] = e.detail.value;
			},
			
			// 上传图片
			upFileImg(key) {
				const self = this
				if (!self.type) return
				util.uploadImageOne({}, value => {
					self[key] = value.data.fullurl;
				});
			},
			// 查看图片
			lookImg(url) {
				if(url != '') {
					uni.previewImage({
						current: url,
						urls: [url]
					})
				}
			},
			
			// 上传
			async upDataInfo() {
				var data = {
					id: this.id,
					number: this.number,
					image: this.image,
					bank_card_id: this.bankIndex >= 0 ? this.bankList[this.bankIndex].id : 0
				}
				data.token = uni.getStorageSync('token');
				var res = await postUploadDegrees(data);
				if(res.data.code == 1){
					uni.showToast({
						title: "提交成功",
						icon: "none"
					})
					setTimeout(()=> {
						uni.navigateBack()
					},2000)
				} else {
					uni.showToast({
						title: res.data.msg,
						icon: "none"
					})
				}
			}

		}
	}
</script>

<style scoped>
	page {
		background: #f6f6f8;
	}

	/* 查看 */
	.look-item>view {
		width: 100%;
		padding: 30rpx;
		border-bottom: solid 1rpx #f2f2f2;
		background-color: #FFFFFF;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.look-item .title {
		font-size: 28rpx;
		color: #333;
	}

	.look-item .value {
		font-size: 26rpx;
		color: #686868;
	}

	.title {
		min-width: 180rpx;
		margin-right: 20rpx;
	}

	/* 编辑 */
	.edit-item>view {
		background-color: #FFFFFF;
		padding: 25rpx 30rpx;
		border-bottom: solid 1rpx #f4f4f4;
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}

	.edit-item .title {
		font-size: 24rpx;
		color: #545454;
	}

	.picker-veh {
		width: 110rpx;
	}

	.picker-veh image {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-font {
		font-size: 25rpx;
		color: #323232;
	}

	.right-icon {
		width: 30rpx;
		height: 30rpx;
	}

	.edit-item .must::before {
		content: "*";
		position: absolute;
		left: 12rpx;
		color: #ee0a24;

	}

	/* 编辑 保存 */
	.edit-btn {
		width: 690rpx;
		height: 80rpx;
		background-color: #49c265;
		font-size: 26rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 20rpx auto;
		border-radius: 10rpx;
	}

	.w-max-100 {
		width: 100%;
	}

	.img-box {
		width: 310rpx;
		height: 200rpx;
		position: relative;
	}

	.img-box image {
		width: 100%;
		height: 100%;
	}
	
	.img-box .clear-img {
		width: 35rpx;
		height: 35rpx;
		position: absolute;
		right: 10rpx;
		top: 10rpx;
		z-index: 99;
	}
	
	.clzp-box>view {
		margin-right: 30rpx;
		margin-bottom: 30rpx;
		text-align: center;
		font-size: 24rpx;
	}

/* 	.clzp-box>view :nth-child(2n+n) {
		margin-right: 0 !important;
	} */

	.head_url {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	.histry {
		background-color: transparent;
		text-align: right;
		font-size: 28rpx;
		margin-right: 30rpx;
		color: #0000EE;
	}
</style>
